<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>赛博朋克登录页面</title>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Orbitron');

    body {
      margin: 0;
      padding: 0;
      background: radial-gradient(ellipse at center, #240028 0%, #0d0017 100%);
      font-family: 'Orbitron', sans-serif;
      color: #00ff9c;
      overflow: hidden;
    }

    canvas {
      display: block;
    }

    #login-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      background: rgba(0, 0, 0, 0.5);
      box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-right: 1px solid rgba(255, 255, 255, 0.2);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 25px;
      padding: 40px;
      text-align: center;
    }

    #login-box h2 {
      margin: 0 0 30px;
      padding: 0;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 4px;
      font-size: 28px;
    }

    #login-box .user-box {
      position: relative;
    }

    #login-box .user-box input {
      width: 100%;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      margin-bottom: 30px;
      border: none;
      border-bottom: 1px solid #fff;
      outline: none;
      background: transparent;
    }

    #login-box .user-box label {
      position: absolute;
      top: 0;
      left: 0;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      pointer-events: none;
      transition: 0.5s;
    }

    #login-box .user-box input:focus ~ label,
    #login-box .user-box input:valid ~ label {
      top: -20px;
      left: 0;
      color: #00ff9c;
      font-size: 12px;
    }

    #login-box form a {
      position: relative;
      display: inline-block;
      padding: 10px 20px;
      color: #00ff9c;
      font-size: 16px;
      text-decoration: none;
      text-transform: uppercase;
      overflow: hidden;
      transition: 0.5s;
      margin-top: 40px;
      letter-spacing: 4px;
    }

    #login-box a:hover {
      background: #00ff9c;
      color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 5px #00ff9c, 0 0 25px #00ff9c, 0 0 50px #00ff9c, 0 0 100px #00ff9c;
    }

    #login-box a span {
      position: absolute;
      display: block;
    }

    #login-box a span:nth-child(1) {
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #00ff9c);
      animation: btn-anim1 1s linear infinite;
    }

    @keyframes btn-anim1 {
      0% {
        left: -100%;
      }
      50%,100% {
        left: 100%;
      }
    }

    #login-box a span:nth-child(2) {
      top: -100%;
      right: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(180deg, transparent, #00ff9c);
      animation: btn-anim2 1s linear infinite;
      animation-delay: 0.25s;
    }

    @keyframes btn-anim2 {
      0% {
        top: -100%;
      }
      50%,100% {
        top: 100%;
      }
    }

    #login-box a span:nth-child(3) {
      bottom: 0;
      right: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(270deg, transparent, #00ff9c);
      animation: btn-anim3 1s linear infinite;
      animation-delay: 0.5s;
    }

    @keyframes btn-anim3 {
      0% {
        right: -100%;
      }
      50%,100% {
        right: 100%;
      }
    }

    #login-box a span:nth-child(4) {
      bottom: -100%;
      left: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(360deg, transparent, #00ff9c);
      animation: btn-anim4 1s linear infinite;
      animation-delay: 0.75s;
    }

    @keyframes btn-anim4 {
      0% {
        bottom: -100%;
      }
      50%,100% {
        bottom: 100%;
      }
    }
  </style>
</head>
<body>
  <div id="login-box">
    <h2>登录</h2>
    <form>
      <div class="user-box">
        <input type="text" name="" required="">
        <label>用户名</label>
      </div>
      <div class="user-box">
        <input type="password" name="" required="">
        <label>密码</label>
      </div>
      <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        提交
      </a>
    </form>
  </div>

  <canvas id="canvas"></canvas>

  <script>
    window.addEventListener('load', function() {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      canvas.height = window.innerHeight;
      canvas.width = window.innerWidth;

      const particlesArray = [];
      let hue = 0;

      window.addEventListener('resize', function() {
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
      });

      const mouse = {
        x: undefined,
        y: undefined,
      };

      canvas.addEventListener('click', function(event) {
        mouse.x = event.x;
        mouse.y = event.y;
        for (let i = 0; i < 10; i++) {
          particlesArray.push(new Particle());
        }
      });

      canvas.addEventListener('mousemove', function(event) {
        mouse.x = event.x;
        mouse.y = event.y;
        for (let i = 0; i < 2; i++) {
          particlesArray.push(new Particle());
        }
      });

      class Particle {
        constructor() {
          this.x = mouse.x;
          this.y = mouse.y;
          this.size = Math.random() * 15 + 1;
          this.speedX = Math.random() * 3 - 1.5;
          this.speedY = Math.random() * 3 - 1.5;
          this.color = 'hsl(' + hue + ', 100%, 50%)';
        }
        update() {
          this.x += this.speedX;
          this.y += this.speedY;
          if (this.size > 0.2) this.size -= 0.1;
        }
        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();
        }
      }

      function handleParticles() {
        for (let i = 0; i < particlesArray.length; i++) {
          particlesArray[i].update();
          particlesArray[i].draw();
          for (let j = i; j < particlesArray.length; j++) {
            const dx = particlesArray[i].x - particlesArray[j].x;
            const dy = particlesArray[i].y - particlesArray[j].y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            if (distance < 100) {
              ctx.beginPath();
              ctx.strokeStyle = particlesArray[i].color;
              ctx.lineWidth = 0.2;
              ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
              ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
              ctx.stroke();
            }
          }
          if (particlesArray[i].size <= 0.3) {
            particlesArray.splice(i, 1);
            i--;
          }
        }
        hue += 5;
      }

      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        handleParticles();
        requestAnimationFrame(animate);
      }
      animate();
    });
  </script>
</body>
</html>